<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-button size="small" type="primary" @click="onShow"
          >添加视频</el-button
        >
        <el-button size="small" type="info" @click="deleteFile"
          >删除视频</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <span v-for="(item, index) in number" :key="index">
        <video controls="controls" width="400">
          <source
            src="../../../../public/static/video/20.mp4"
            type="video/mp4"
          />
          您的浏览器不支持 video 标签。
        </video>
      </span>
    </el-row>

    <!-- //上传的地址action,必填参数 -->
    <el-dialog title="选择图片" :visible.sync="dialogVisible" width="30%">
      <el-upload
        class="upload-demo"
        drag
        action="#"
        multiple
        :on-progress="uploadFile"
        :on-success="uploadSuccess"
        :on-error="uploadSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传视频文件</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "video",
  data() {
    return {
      info: null,
      file: null,
      fileList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ],
      imageUrl:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      dialogVisible: false, //是否显示上传的附件
      videoShow: true,
      number: 0,
      fits: ["fill", "contain", "cover", "none", "scale-down"],
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  created() {
    this.info = {
      url: "https://cdn.wujiebantu.com/ai/0986E2C0EFDC19A974E21CCE061BDD79-01.jpg?imageView2/2/w/800/q/75/format/webp",
      content: "有2个人",
    };
  },

  methods: {
    //视频上传时
    uploadFile(event, file, fileList) {
      if (file && file.raw && file.raw.type.includes("video")) {
      } else {
        this.$confirm("请选择视频文件上传, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dialogVisible = true;
          })
          .catch(() => {
            this.dialogVisible = false;
          });
      }
    },

    //视频上传成功时
    uploadSuccess(event, file, fileList) {
      if (file && file.raw && file.raw.type.includes("video")) {
        this.number += 1;
        this.dialogVisible = false;
      }
    },

    //删除列表文件后触发
    handleRemove(file, fileList) {
      console.log("handlePreview", file, fileList);
    },

    //点击文件上传后自动显示的列表
    handlePreview(file) {
      console.log(file);
      recognize();
      download();
    },

    ////删除列表前的提示
    beforeRemove(file, fileList) {
      console.log("beforeRemove", file, fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    handleExceed(files, fileList) {
      console.log("handleExceed", file, fileList);
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

    //显示文件上传的附件
    onShow() {
      this.dialogVisible = true;
    },
    //删除
    deleteFile() {
      this.number = 0;
    },
  },
};
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  position: relative;
  border-radius: 4px;
  min-height: 36px;
  margin: 10px;
}

.app-container {
  min-height: calc(100vh - 84px);
  color: #303133;
}
.grid-content-img {
  height: calc(100vh - 184px);
  padding: 20px;
}
.grid-content-right {
  min-height: calc(100vh - 137px);
  padding: 20px;
}

:deep() .upload-demo {
  margin: 20px 0 0 500px;
}
.box-card {
  width: 380px;
}
</style>
